<template>
  <div class="products">
    <a-card>
      <h2>产品列表</h2>
      <a-divider></a-divider>
      <div class="search">
        <a-input-search placeholder="请根据产品名称进行搜索" enter-button v-model:value="keyword" @search="onSearch" />
        <a v-if="isSearch" href="javascript:;" @click="back">返回</a>
        <a-button type="primary" @click="show=true">添加一条</a-button>
      </div>
      <a-table  :rowKey="(record,index)=> index" :columns="columns" :data-source="list" :pagination='false'>
        <template #publishDate='data'>
          {{formatTimestamp(data.record.publishDate)}}
        </template>
        <template #actions='record'>
          <a href="javascript:;" @click="remove(record)">删除</a>
        </template>
      </a-table>
      <a-pagination class="pagi" v-model:current="current" :total="total" :page-size="5" @change="setPage"></a-pagination>
    </a-card>
    <!-- <AddProduct :show="show" @setShow='setShow'></AddProduct> -->
    <AddProduct v-model:show="show"></AddProduct>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import AddProduct from "./components/AddProduct.vue";
import { product } from "@/service";
import { result } from "@/utils/result.js";
import { formatTimestamp } from "@/utils/formatTimestamp.js";
export default defineComponent({
  components: {
    AddProduct,
  },
  setup() {
    const columns = [
      {
        title: "产品名",
        dataIndex: "name",
      },
      {
        title: "价格",
        dataIndex: "price",
      },
      {
        title: "著作人",
        dataIndex: "author",
      },
      {
        title: "上架日期",
        dataIndex: "publishDate",
        slots: {
          customRender: "publishDate",
        },
      },
      {
        title: "类别",
        dataIndex: "classify",
      },
      {
        title: "操作",
        slots: {
          customRender: "actions",
        },
      },
    ];

    const show = ref(false);
    // const setShow = (payload) => {
    //   show.value = payload;
    // };

    const list = ref([]);
    const current = ref(1);
    const total = ref(0);
    const keyword = ref("");
    const isSearch = ref(false);
    const getList = async () => {
      const res = await product.list({
        page: current.value,
        size: 5,
        keyword: keyword.value,
      });
      console.log("getList时打印res", res);

      result(res).success(({ data }) => {
        const { list: l, total: t } = data;
        console.log("list", l, "t", t);
        list.value = l;
        total.value = t;
      });
    };
    //页面current发生变化
    const setPage = (page) => {
      current.value = page;
      getList();
    };

    const onSearch = () => {
      isSearch.value = true;
      getList();
    };
    const back = () => {
      keyword.value = "";
      isSearch.value = false;
      getList();
    };
    //组件挂载做的事情
    onMounted(async () => {
      getList();
    });

    const remove = async ({ text: record }) => {
      // console.log('打印data',record);
      const { _id } = record;
      const res = await product.remove(_id);
      result(res).success(({ msg }) => {
        message.success(msg);
        //删除两种方法 getList()再次请求    2.获取idx再splice删除掉
        getList();

        // const idx = list.value.findIndex((item) => {
        //   return item._id === _id;
        // });
        // list.value.splice(idx, 1);
      });
    };
    return {
      columns,
      show, //添加一条弹框
      //   setShow
      list,
      formatTimestamp,
      //分页数据
      current,
      total,

      keyword,
      setPage,
      onSearch,
      back, //返回
      isSearch, //搜索旁返回的状态
      remove,
    };
  },
});
</script>

<style lang='less' scoped>
@import url("../../assets/styles/common.less");
</style>